<template>
  <div>
    <div class="search-title">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="反馈内容"  prop="content">
          <a-input v-model="searchForm.content" placeholder="请输入反馈内容"/>
        </a-form-model-item>
        <a-form-model-item class="searchButton">
          <a-button type="primary" v-if="QX.read" @click="getSearch">查询</a-button>
          <a-button type="default" v-if="QX.read" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="feedbackId"
      :scroll="{y: this.$getViewportSize().height-300 }">
      <span slot="action" slot-scope="text,record">
        <a @click="editAuth(record)"><a-icon class="iconBtn" type="eye" />查看</a>
      </span>
    </a-table>
    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="onChangePage"
      style="float: right;margin-top: 15px"
    />
    <a-modal
      v-model:visible="visible"
      title="查看反馈"
      @cancel="handleCancel"
      :width="modalWidth"
      :footer="null"
      class="feedback-modal"
    >
      <!-- 一行放反馈人、反馈时间 -->
      <div class="row-item">
        <span class="label">反馈人：</span>{{ form.createUser }}
        <span/>
        <span class="label ml-2 time-wrap">反馈时间：</span>{{ form.timeAgo }}
      </div>
      <!-- 反馈内容区域 -->
      <div class="content-wrap">
        <span class="label">反馈内容：</span>
        <div class="content-box">
          {{ form.content }}
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {req} from '../../../api/axiosFun'
import preventBack from 'vue-prevent-browser-back';
export default {
  name: "Feedback",
  mixins: [preventBack],//注入
  data() {
    return {
      QX: {},
      disabled: false,
      checkedKeys: [],
      selectAuth: [],
      treeData: [],
      title: '',
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      tableHeight: 0,
      modalWidth: window.innerWidth * 1 / 2,
      expanded: false,//筛选条件是否展开
      form: {
        feedbackId: 0,
        title: '',
        content: '',
        createUser: '',
        timeAgo: '',
        feedbackType: '',
      },
      searchForm: {
        content: '',
      },
      visible: false,
      dataList: [],
      columns,
      loading: false,
      submitLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#F5F5F5",//滚动条颜色
          opacity: 1,//滚动条透明度
          "overflow-x": "hidden"
        }
      },
    }
  },
  watch: {
    visible(newVal, oldVal) {
      if (!newVal) {
        this.restForm('form');
        this.form.feedbackId = 0
        this.checkedKeys = [];
        this.selectAuth = [];
        this.treeData = [];
      }
    }
  },
  mounted() {
    this.getFeedbackList();
    this.actionTitle = '操作';
    // 监听窗口大小变化以更新弹窗宽度
    window.addEventListener('resize', this.updateModalWidth);
  },
  methods: {
    auto() {
      return auto
    },
    /* 功能权限树点击复选框触发事件 */
    check(checkedKeys, e) {
      let selectAuth = [];
      if (!checkedKeys || !checkedKeys.length) {
        this.selectAuth = [];
      }
      checkedKeys.forEach((key, index) => {
        //key包含-
        if (key.includes('-')) {
          selectAuth.push(key);
        }
      });
      this.selectAuth = selectAuth;
    },
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getFeedbackList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.restForm(form);
      this.pageIndex = 1
      this.getFeedbackList();
    },
    /* 删除反馈 */
    removeFeedback(record) {
      this.loading = true
      req("post", '/feedback/removeFeedback', {
        feedbackId: record.feedbackId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.$message.success(res.message);
          this.getFeedbackList();
        }
      });
    },
    /* 查看反馈信息 */
    editAuth(record) {
      this.loading = true
      req("post", '/feedback/getBUserFeedback', {
        feedbackId: record.feedbackId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.visible = true;
          this.disabled = true;
          this.title = '查看反馈';
          let feedback = res.data;
          this.$nextTick(() => {
            this.form.feedbackId = feedback.feedbackId;
            this.form.title = feedback.title;
            this.form.content = feedback.content;
            this.form.createUser = feedback.createUser;
            this.form.timeAgo = feedback.timeAgo;
            this.form.feedbackType = feedback.feedbackType;
            this.checkedKeys = feedback.auths;
            this.checkedKeys.forEach((key, index) => {
              //key包含-
              if (key.includes('-')) {
                this.selectAuth.push(key);
              }
            });
          })
        }
      });
    },
    /* 保存or修改反馈信息 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.form.feedbackId ? 'updateFeedback' : 'addFeedback';
          let selectAuth = this.selectAuth;
          this.form.selectAuth = JSON.stringify(selectAuth);
          this.submitLoading = true
          req("post", `/feedback/${url}`, this.form).then(res => {
            if (res.result === 'success') {
              this.visible = false;
              this.getFeedbackList();
              this.$message.success(res.message);
            }
            this.submitLoading = false
          });
        }
      });
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getFeedbackList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getFeedbackList();
    },
    /* 反馈信息列表 */
    getFeedbackList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      req("post", `/feedback/list`, this.searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.QX = res.QX;
            //无权限隐藏操作列
            if (!this.QX.edit && !this.QX.delete) {
              this.hideAction();
            }else if(columns[columns.length - 1].title!='操作'){
              columns.push(actionShow);
            }
            this.totalPage = res.page.totalResult;
          }
          this.loading = false;
        }).catch(error=> {
        this.loading = false;
      });
    },
    /*无所有行操作权限时,隐藏操作栏*/
    hideAction() {
      if (columns[columns.length - 1].title == '操作') {
        columns.splice(columns.length - 1, 1)
      }
    },
    /*校验代号类型*/
    validCode(value) {
      if(value.length>20){
        value=value.slice(0,20);
      }
      for (let i = value.length-1; i >= 0; i--)
      {
        let unicode=value.charCodeAt(i);
        if (unicode>65280 && unicode<65375)
        {
          value=value.substr(0,i);
        }
      }
      this.value = value;
    },
    /* 更新弹窗宽度 */
    updateModalWidth() {
      this.modalWidth = window.innerWidth * 1 / 2;
    }
  }
}
const actionShow =  {
  title: '操作',
  width: '200px',
  hide: true,
  dataIndex: 'action',
  key: 'action',
  align: 'center',
  scopedSlots: {customRender: 'action'},
}

const columns = [
  {
    title: '序号',
    width:'50px',
    align: 'center',
    customRender: (text, row, index) => {
      return index+1;
    },
  },
  {
    title: '创建者',
    align: 'center',
    dataIndex: 'createUser',
    key: 'createUser',
    width:'110px',
  },
  {
    title: '反馈内容',
    dataIndex: 'content',
    key: 'content',
    align:'center',
    width:'180px',
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'timeAgo',
    key: 'timeAgo',
    align:'center',
    width:'180px',
  },

  {
    title: '操作',
    width: '150px',
    hide: true,
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style scoped>
/* 保持原有引入 */
@import "../../../assets/css/maincss.css";

.feedback-modal {
  padding: 20px;
}
.row-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.label {
  font-weight: bold;
}
.content-wrap {
  display: flex;
  align-items: flex-start; /* 标题和内容顶部对齐（关键：让子元素顶部对齐） */
}
.time-wrap {
  margin-left: 20px;
}
.content-box {
  flex: 1;
  margin-left: 8px;
  /* 核心调整：去掉默认 padding-top，让内容贴顶 */
  background: #f8f9fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  white-space: pre-line;
  /* 新增：强制内容区自己控制垂直对齐 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 60px;
  padding: 8px 10px; /* 缩小上下内边距，让内容更紧凑 */
  line-height: 1.4; /* 调整行高，适配紧凑布局 */
}
/* 如果内容是文本，可直接让首行贴顶 */
.content-box > div,
.content-box > p {
  margin-top: 0; /* 去掉内容自身的默认 margin-top */
}

/* 响应式保持原有逻辑 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    margin-bottom: 16px;
  }
  .form-row-auto .form-item,
  .form-row-full .form-item {
    width: 100%;
    margin-bottom: 16px !important;
    white-space: normal;
  }
}
.form-item .ant-form-item-control {
  line-height: 36px;
}
.form-item {
  margin-bottom: 32px;
}
</style>
